<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-ctx-wrap">
				<div class="panel-item" data-title="基础信息">
					<div class="section-title">充值赠送</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label">规则标题</div>
							<div class="val">
								<el-input v-model="form.ruleTitle" placeholder="">
								</el-input>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label">活动状态</div>
							<div class="val">
								<el-radio-group v-model="form.ruleStatus" class="column">
									<el-radio :label="1">开启</el-radio>
									<el-radio :label="0">关闭</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>
				</div>


				<div class="panel-item" data-title="规则">
					<div class="section-title flex-between">
						<div class="title-text">规则设置</div>
						<el-button type="primary" @click="do_add_rule()"> 增加规则 </el-button>
					</div>

					<div class="table-wrap">
						<div class="table-sec">
							<div class="table-box">
								<el-table ref="multipleTable" :data="rule_list" fit stripe highlight-current-row
									min-width="100px" style="width: 100%">
									<el-table-column label="每满xx元">
										<template slot-scope="scope">
											<div class="input-box">
												<el-input v-model="scope.row.man" type="number"></el-input>
											</div>
										</template>
									</el-table-column>
									<el-table-column label="赠送xx元">
										<template slot-scope="scope">
											<div class="input-box">
												<el-input v-model="scope.row.zeng" type="number"></el-input>
											</div>
										</template>
									</el-table-column>
									<el-table-column fixed="right" label="操作" width="50px">
										<template slot-scope="scope">
											<el-link type="primary"
												@click="do_remove_rule(scope.row, scope)">移除</el-link>
										</template>
									</el-table-column>
								</el-table>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="footer-actions">
			<!-- <el-button @click="formCancel()"> 取消 </el-button> -->
			<el-button type="primary" @click="doSubmit()"> 保存 </el-button>
		</div>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";
export default {
	name: "news",
	components: {

	},
	data() {
		return {
			form: {
				id: 6, // 充值赠送活动规则
				ruleTitle: "",
				ruleType: "5",
				ruleInfo: "",
				ruleStatus: 1,
			},
			rule_list: [
				// {
				// 	man: '',
				// 	zeng: ''
				// }
			],
		};
	},
	computed: {},
	watch: {

	},
	created() {
		this.setView();
	},
	mounted() { },
	methods: {
		setView() {
			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "setting_foreignInfo",
					id: 6, //
				},
			}).then((res) => {
				let data = res.data;
				if (res.code == 200) {
					this.info = data;
					this.form = {
						id: data.id,
						ruleTitle: data.ruleTitle,
						ruleType: data.ruleType,
						ruleInfo: data.ruleInfo,
						ruleStatus: data.ruleStatus,
					};
					if (data.ruleInfo && data.ruleInfo.length) {
						this.rule_list = data.ruleInfo
					}
				}
			});


			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "yingxiao_getChongzhiList",

				},
			}).then((res) => {
				let data = res.data;
				if (res.code == 200) {

				}
			});


		},


		do_add_rule() {
			this.rule_list.push({
				man: '',
				zeng: ''
			})
		},

		do_remove_rule(row, scope) {
			console.log('scope', scope)
			// let index = this.rule_list.findIndex(v => v.id == row.id)
			this.rule_list.splice(scope.$index, 1)
		},

		doSubmit() {
			let params = {
				...this.form,
				ruleInfo: JSON.stringify(this.rule_list)
			};

			if (!this.form.ruleTitle) {
				alertErr('请设置规则标题')
				return
			}

			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "setting_saveForeign",
					...params,
				},
			}).then((res) => {
				alert(res);
				if (res.code == 200) {

				}
			});
		},

		//意见反馈
		do_delete_feedback(item, scope) {
			console.warn("表格行删除", {
				...item
			});
			console.warn("表格行删除", scope);

			this.dataList_feedType.splice(scope.$index, 1);
		},
		do_add_feedback() {
			this.dataList_feedType.push({
				title: '',
			});
		},

	},
};
</script>

<style scoped lang="less">
/deep/ .upload-image .el-upload {
	width: 100px;
	height: 100px;
	line-height: 98px;
}

/deep/ .upload-video .el-upload {
	width: 100px;
	height: 100px;
	line-height: 98px;

	background-color: #fbfdff;
	border: 1px dashed #c0ccda;
	border-radius: 6px;
	box-sizing: border-box;
	cursor: pointer;
	vertical-align: top;
}

/deep/ .el-upload-list__item {
	background: #eef6ff !important;
	font-size: 16px;
}

.video-preview-box {
	margin-top: 20px;
}





.footer-actions {
	display: flex;
	justify-content: flex-end;
	justify-content: center;
	position: fixed;
	z-index: 100;
	bottom: 0;
	right: 0;
	left: 230px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 1px 0 #ccc;
	// padding-right: 35px;
	margin-right: 18px;
}





// .el-radio-group.column {
//   display: flex;
//   flex-direction: column;
// }

.tip-input {
	margin-left: 20px;
	display: inline-block;
	max-width: 150px;
}

.time-divider {
	margin: 0 15px;
}

.page-wrap {
	.page-inner {}
}

.page-ctx-wrap {
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

.section-title {
	margin-bottom: 20px;
	width: 100%;
	height: auto;
	line-height: 46px;
	background: rgb(241, 242, 245);
	padding-left: 30px;
	font-size: 16px;
	font-weight: 600;
}

.panel-item {
	padding-bottom: 100px;
	padding-bottom: 50px;
	// .flex();
	// flex-wrap: wrap;

	.input-item {
		margin-bottom: 20px;
		width: 100%;
		max-width: 800px;
		// width: 50%;

		&.hidden-item {
			display: none;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.input-box {
			width: 100%;
			display: flex;
			align-items: flex-start;

			.label {
				height: 32px;
				line-height: 32px;
				min-width: 160px;
				min-width: 100px;
				text-align: right;
				margin-right: 40px;
				font-size: 20px;
				font-size: 14px;
				font-family: PingFang SC;
				color: #666666;

				&.required {
					position: relative;

					&:after {
						content: "*";
						color: #f00;
						position: absolute;
						right: -15px;
						top: 3px;
						// font-weight: bold;
					}
				}

				&.hidden {
					visibility: hidden;
				}
			}
		}

		//输入框组
		.inputs {
			.flex();

			.date-box {
				flex: 1;
			}

			.shuru-box {
				margin-left: 20px;
				flex: 4;
			}
		}

		.val {
			flex: 2;
			font-size: 20px;
			font-family: PingFang SC;
			color: #000000;

			.shuru {
				width: 100%;
				padding-left: 20px;
				outline: none;
				height: 40px;
				background: #ffffff;
				border: 1px solid #d4d8eb;
				border-radius: 4px;
				font-size: 16px;
			}

			.form-ele {
				.el-input {
					width: 100%;
				}

				.el-select {
					width: 100%;
				}

				.el-cascader {
					width: 100%;
				}
			}

			.input-tip {
				line-height: 32px;
				font-size: 14px;
				font-family: PingFang SC;
				color: #666;
			}
		}
	}
}

// 标签
.tag-wrap {

	// 标签样式
	.cus-tag-item {
		margin-right: 15px;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.cus-tag-input {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		outline: 0;
		padding: 0 15px;
		width: 90px;
		height: 32px;
		line-height: 32px;
		transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

		&:focus {
			border-color: #66b1ff;
		}
	}

	// 标签样式

	.table-box {
		width: 100%;
		border-collapse: 0;
		/* table-layout: fixed; */
		border: 1px solid #eee;
		font-size: 14px;
	}

	.table-box tr {
		/* min-height: 40px; */
	}

	.table-box th {
		text-align: left;
		padding: 10px 10px;

		border-right: 1px solid #eee;
	}

	.table-box td {
		text-align: left;
		padding: 10px 10px;
		border-top: 1px solid #eee;
		border-right: 1px solid #eee;
	}

	.table-box td:nth-child(1) {
		width: 20%;
	}

	.table-box td:nth-child(2) {
		width: 80%;
	}

	.table-box .tag-item {
		cursor: pointer;
		outline: none;
		user-select: none;
		margin-right: 10px;
		display: inline-flex;
		align-items: center;
		color: #333;
	}

	.table-box .tag-item:before {
		content: "";
		width: 20px;
		height: 20px;
		display: inline-block;
		background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-0.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		margin-right: 3px;
	}

	.table-box .tag-item.checked:before {
		background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-1.png");
	}
}


.loop-add {
	margin-top: 20px;
}
</style>